<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>编辑用户</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
</head>
<body>
<div class="layui-form" lay-filter="sys-user-form" id="sys-user-form"  style="padding: 20px 0 0 0;">
  <input type="hidden" name="id" id="id">
  <input type="hidden" id="avatar" name="avatar">
  <div class="layui-form-item">
    <label class="layui-form-label">头像</label>
    <div class="layui-input-inline layui-upload">
      <button type="button" class="layui-btn" id="upload-btn">上传图片</button>
      <div class="layui-upload-list">
        <img class="layui-upload-img" id="upload-img" width="100px" height="100px" src="/static/style/img/def_profile.jpg">
        <p id="upload-text"></p>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">账号</label>
    <div class="layui-input-inline">
      <input readonly type="text" name="userName" lay-verify="required" placeholder="请输入用户名" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">手机号码</label>
    <div class="layui-input-inline">
      <input type="text" name="phonenumber" lay-verify="required" placeholder="请输入手机号码" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户邮箱</label>
    <div class="layui-input-inline">
      <input type="text" name="email" lay-verify="required" placeholder="请输入用户邮箱" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item" lay-filter="enabled">
    <label class="layui-form-label">状态</label>
    <div class="layui-input-block" id="enabled"></div>
  </div>
  <div class="layui-form-item" lay-filter="sex">
    <label class="layui-form-label">选择性别</label>
    <div class="layui-input-block" id="sex"></div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">备注</label>
    <div class="layui-input-inline">
      <input type="text" name="remark" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">角色</label>
    <div class="layui-input-inline">
      <div id="roleName" class="xm-select-demo"></div>
    </div>
  </div>
  <div class="layui-form-item layui-hide">
    <input type="button" lay-submit lay-filter="save-submit" id="save-submit" value="确认">
  </div>
</div>

<script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<script th:inline="javascript">
    let ctx = [[${#request.getContextPath()}]];
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        xmSelect: 'xm-select'
    }).use(['index', 'form','xmSelect','upload','crud'], function(){
        let $ = layui.$
            ,xmSelect = layui.xmSelect
            ,upload = layui.upload
            ,crud = layui.crud
            ,form = layui.form
            ,sysUser = [[${sysUser}]];

        if (sysUser.avatar) {
          $('#upload-img').attr('src', sysUser.avatar); //图片链接（base64）
        }
        form.val('sys-user-form', sysUser);

        form.on('submit(save-submit)', function(data) {
            let roleIds = crud.getXmSelectTreeIds(select);
            data.field.roleIds = roleIds;
            $.ajax({
                type: 'POST',
                url:  ctx + '/sysUser/edit',
                data: JSON.stringify(data.field),
                contentType:'application/json;charset=UTF-8',
                dataType: 'json',
                success: function(result) {
                    layer.msg(result.message);
                    if (result.code === 200) {
                        let index = parent.layer.getFrameIndex(window.name);
                        // 关闭
                        parent.layer.close(index);
                        // 刷新
                        parent.location.reload();
                    }
                }
            });
        });

        let select = xmSelect.render({
            el: '#roleName',
            tips:"选择角色",
            filterable: true,
            tree: {
              //是否显示树状结构
              show: true,
              //是否展示三角图标
              showFolderIcon: true,
              //是否显示虚线
              showLine: true,
              //间距
              indent: 20,
              //默认展开节点的数组, 为 true 时, 展开所有节点
              expandedKeys: [ -3 ],
              //是否严格遵守父子模式
              strict: false,
              //是否开启极简模式
              simple: false,
              //点击节点是否展开
              clickExpand: true,
              //点击节点是否选中
              clickCheck: true
            },
            toolbar: {
              show: false
            },
            height: 'auto',
            data: [],
            //分页
            paging: true,
            //每页条数
            pageSize: 10,
        });

        $.ajax({
            type: 'get',
            url: ctx + '/sysRole/xmSelect?ids=' + sysUser.roleIds,
            success: function(res) {
                select.update({
                    data: res
                })
            }
        });

        //普通图片上传
        let uploadInst = upload.render({
            elem: '#upload-btn'
            ,url: ctx + '/sysCommon/upload'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#upload-img').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                if (res.code === 200) {
                    $("#avatar").val(res.data.url);
                    return layer.msg('上传成功');
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                let uploadText = $('#upload-text');
                uploadText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                uploadText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
        crud.setRadio("enabled","enabled",sysUser.enabled);
        crud.setRadio("sex","sex",sysUser.sex);
    })
</script>
</body>
</html>